import { Form, Input, Select, Button } from "ant-design-vue";

import constants from "ysrc/utils/variable";
import { handleApiPath, nameLengthLimit } from "../../../../common.js";
const HTTP_METHOD = constants.HTTP_METHOD;
const HTTP_METHOD_KEYS = Object.keys(HTTP_METHOD);

const FormItem = Form.Item;
const Option = Select.Option;
function hasErrors(fieldsError) {
	return Object.keys(fieldsError).some(field => fieldsError[field]);
}

class AddInterfaceForm extends Component {
	static propTypes = {
		form: PropTypes.object,
		onSubmit: PropTypes.func,
		onCancel: PropTypes.func,
		catid: PropTypes.number,
		catdata: PropTypes.array
	};
	handleSubmit = e => {
		e.preventDefault();
		this.props.form.validateFields((err, values) => {
			if (!err) {
				this.props.onSubmit(values, () => {
					this.props.form.resetFields();
				});
			}
		});
	};

	handlePath = e => {
		let val = e.target.value;
		this.props.form.setFieldsValue({
			path: handleApiPath(val)
		});
	};
	render() {
		const { getFieldDecorator, getFieldsError } = this.props.form;
		const prefixSelector = getFieldDecorator("method", {
			initialValue: "GET"
		})(
			<Select style={{ width: 75 }}>
				{HTTP_METHOD_KEYS.map(item => {
					return (
						<Option key={item} value={item}>
							{item}
						</Option>
					);
				})}
			</Select>
		);
		const formItemLayout = {
			labelCol: {
				xs: { span: 24 },
				sm: { span: 6 }
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 14 }
			}
		};

		return (
			<Form onSubmit={this.handleSubmit}>
				<FormItem {...formItemLayout} label="接口分类">
					{getFieldDecorator("catid", {
						initialValue: this.props.catid
							? this.props.catid + ""
							: this.props.catdata[0]._id + ""
					})(
						<Select>
							{this.props.catdata.map(item => {
								return (
									<Option key={item._id} value={item._id + ""}>
										{item.name}
									</Option>
								);
							})}
						</Select>
					)}
				</FormItem>
				<FormItem {...formItemLayout} label="接口名称">
					{getFieldDecorator("title", {
						rules: nameLengthLimit("接口")
					})(<aInput placeholder="接口名称" />)}
				</FormItem>

				<FormItem {...formItemLayout} label="接口路径">
					{getFieldDecorator("path", {
						rules: [
							{
								required: true,
								message: "请输入接口路径!"
							}
						]
					})(
						<aInput
							onBlur={this.handlePath}
							addonBefore={prefixSelector}
							placeholder="/path"
						/>
					)}
				</FormItem>
				<FormItem {...formItemLayout} label="注">
					<span style={{ color: "#929292" }}>
						详细的接口数据可以在编辑页面中添加
					</span>
				</FormItem>
				<FormItem class="catModalfoot" wrapperCol={{ span: 24, offset: 8 }}>
					<aButton
						onClick={this.props.onCancel}
						style={{ marginRight: "10px" }}>
						取消
					</aButton>
					<aButton
						type="primary"
						htmlType="submit"
						disabled={hasErrors(getFieldsError())}>
						提交
					</aButton>
				</FormItem>
			</Form>
		);
	}
}

export default Form.create()(AddInterfaceForm);
